<script setup name="DingDanHistory">
import {ref} from 'vue';
import useUserStore from '@/store/modules/user'
import {useRouter, useRoute} from 'vue-router';
import {listDingDanHistory} from '@/api/system/dingdan.js';
import {listAll as listAllPinLei} from "@/api/system/huopinpinlei.js";
import {listByPinLei} from "@/api/system/huopin.js";

const router = useRouter();
const route = useRoute();
const userStore = useUserStore()
const {proxy} = getCurrentInstance();

const queryParams = ref({
  dateRange: [],
  pinLeiId: '',
  huoPinId: ''
});

const tongji = ref({
  sum: 0
});

const pinLeiList = ref([]);
const huiPinList = ref([]);
const dingDanList = ref([]);

async function loadDingDanList() {
  let rsp = await listDingDanHistory(userStore.id, queryParams.value.huoPinId, queryParams.value.dateRange);
  dingDanList.value = rsp.data;
  tongji.value.sum = 0;
  for(let dingDan of dingDanList.value){
    for(let detail of dingDan.list){
      console.log(detail);
      console.log(detail.buyCount);
      console.log(detail.huoPinPrice);
      if(detail.buyCount!=null && detail.huoPinPrice!=null){
        tongji.value.sum+=(detail.buyCount*detail.huoPinPrice);
      }
    }
  }
}

async function loadAllPinLei() {
  let rsp = await listAllPinLei();
  pinLeiList.value = rsp.data;
}

async function pinLeiChange(pinLeiId) {
  console.log(pinLeiId);
  let rsp = await listByPinLei({pinLeiId: pinLeiId});
  huiPinList.value = rsp.data;
}

onMounted(() => {
  loadDingDanList();
  loadAllPinLei();
})

function parseStatus(status) {
  if (status === 0) {
    return "审核中";
  } else if (status === 1) {
    return "已通过";
  } else if (status === 2) {
    return "已驳回";
  } else if (status === 3) {
    return "已撤销";
  } else {
    return "未知状态[" + status + "]";
  }
}

function dateCut(date) {
  if (typeof date === 'undefined' || date === null || date.trim() === "") {
    return ""
  } else {
    return date.split("T")[0];
  }
}

function handleQuery() {
  loadDingDanList();
}

function resetQuery() {
  queryParams.value = {
    dateRange: [],
    pinLeiId: '',
    huoPinId: ''
  };
}
</script>

<template>
  <el-scrollbar height="100%" style="margin-bottom: 100px;">

    <div class="query-area">
      <el-form :model="queryParams" :inline="true" label-width="68px">
        <el-form-item label="货品类型">
          <el-select v-model="queryParams.pinLeiId" placeholder="请选择" @change="pinLeiChange">
            <el-option v-for="item in pinLeiList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="货品">
          <el-select v-model="queryParams.huoPinId" placeholder="请选择">
            <el-option v-for="item in huiPinList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间" style="width: 308px">
          <el-date-picker v-model="queryParams.dateRange" value-format="YYYY-MM-DD"
                          type="daterange" range-separator="-"
                          start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="ding-dan-list">
      <div class="ding-dan-item" v-for="item in dingDanList">
        <el-card style="width: 100%">
          <template #header>
            <div class="card-header">
              <span>订单号：</span><span>{{ item.id }}</span>
            </div>
          </template>
          <div>
            <el-text size="large">
              <div class="info-line"><span>档口：</span><span>{{ item.dangKouName }}</span></div>
            </el-text>
            <el-text size="large">
              <div class="info-line"><span>仓库：</span><span>{{ item.cangKuName }}</span></div>
            </el-text>
            <el-text size="large">
              <div class="info-line"><span>供货日期：</span><span>{{ dateCut(item.riQi) }}</span></div>
            </el-text>
            <el-text size="large">
              <div class="info-line"><span>供货时间：</span><span>{{ item.shiJian }}</span></div>
            </el-text>
            <el-text size="large">
              <div class="info-line"><span>状态：</span><span>{{ parseStatus(item.status) }}</span></div>
            </el-text>
            <el-text size="large">
              <div class="info-line"><span>意见：</span><span>{{ item.statusReason }}</span></div>
            </el-text>
            <div class="ding-dan-details" v-for="item2 in item.list">
              <el-text size="large">
                <div>菜品：</div>
                <div>{{ item2.huoPinName }}({{ item2.huoPinId }}) 数量：{{ item2.buyCount }}, 单价：{{item2.huoPinPrice}}</div>
              </el-text>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </el-scrollbar>

  <div class="tong-ji-area">
    <span>总计：{{tongji.sum}} 元</span>
  </div>
</template>

<style scoped lang="scss">

.el-select {
  width: 150px;
}
.tong-ji-area {
  padding: 5px;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  background-color: white;

}

.query-area {
  padding: 5px;
}

.ding-dan-list {

  padding: 5px;
  height: 100%;
  overflow-x: scroll;

  .ding-dan-item {
    margin-bottom: 20px;

    .info-line {
      margin: 5px;

    }

    .ding-dan-details {
      margin-left: 20px;
    }
  }
}
</style>